<template>
  <wallpaper />
  <top-bar
    @click="contextMenu.hide()"
    :items="[{ id: 'a', name: '桌面', type: 'text', children: [] }]"
  />
  <main-panel @contextmenu.prevent="contextMenu.show($event)" @click="contextMenu.hide()" />
  <dock
    @click="contextMenu.hide()"
    @contextmenu.prevent.self="contextMenu.show($event)"
    :switch-launcher="() => (showLauncher = !showLauncher)"
    :close-launcher="() => (showLauncher = false)"
    :style="{ zIndex: showLauncher ? 99999 : 2 }"
  />
  <transition name="launcher">
    <launcher
      v-if="showLauncher"
      :close-launcher="() => (showLauncher = false)"
      :style="{ zIndex: showLauncher ? 99998 : 1 }"
    />
  </transition>
  <transition name="context-menu">
    <context-menu :config="contextMenu" />
  </transition>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import TopBar from "@/components/desktop/top-bar/TopBar.vue"
import MainPanel from "@/components/desktop/main-panel/MainPanel.vue"
import Dock from "@/components/desktop/dock/Dock.vue"
import Wallpaper from "./wallpaper/Wallpaper.vue"
import Launcher from "./launcher/Launcher.vue"
import ContextMenu from "@/components/desktop/context-menu/ContextMenu.vue"
import ContextMenuType from "./context-menu/types"

const showLauncher = ref(false)

const contextMenu = ref(new ContextMenuType.Config())
</script>

<style scoped lang="scss">
.wallpaper {
  z-index: -1;
}

.top-bar,
.main-panel {
  z-index: 0;
}

.launcher {
  z-index: 1;
}

.dock {
  z-index: 2;
}

.launcher-enter-from,
.launcher-leave-to {
  opacity: 0;
  scale: 1.3;
}

.launcher-enter-active,
.launcher-leave-active {
  transition: all 0.1s ease;
}

.context-menu-enter-from,
.context-menu-leave-to {
  opacity: 0;
  height: 0;
}

.context-menu-enter-active,
.context-menu-leave-active {
  transition: all 0.1s ease;
}
</style>
